${template "main_header.html"}
<div id="app" class="page-content" :style="!urlobj.dialogstate ? 'margin-top:60px;':'margin-top:10px;'">
  <tab-tag v-if="!urlobj.dialogstate"></tab-tag>
  <div style="margin:0 15px 15px 15px;">
    <el-card shadow="never" style="min-height:650px;">

      <div v-if="search_visible" id="search" class="search">
        <el-form ref="form" size="small" :model="searchData" inline>

          <el-form-item label="订单时间">
            <el-date-picker style="width: 220px;"  value-format="yyyy-MM-dd" type="daterange" v-model="searchData.create_time" clearable></el-date-picker>
          </el-form-item>

          <el-form-item label="单位">
           <el-select v-model="searchData.org_name" placeholder="请选择" style="width: 100px;">
              <el-option label="全部" value=""></el-option>
              <el-option v-for="step_item in config.org_arr" :key="step_item.name" :label="step_item.name" :value="step_item.name">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="姓名">
            <el-input v-model="searchData.name" style="width: 160px;" clearable></el-input>
          </el-form-item>

          <el-button size="small" type="primary" icon="el-icon-search" @click="doSearch">查找</el-button>
          <el-button size="small" type="primary" icon="el-icon-download" @click="doExport">导出明细</el-button>
          <el-button size="small" type="success" icon="el-icon-download" @click="doExport1">导出统计明细</el-button>
        </el-form>
      </div>

      <el-table :row-class-name="rowClass" @selection-change="selection" @row-click="handleRowClick" :tree-props="{children: 'children'}" :default-expand-all="expand" row-key="id" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading" ref="multipleTable" border class="eltable" :data="list" style="width: 100%">
        <el-table-column align="center" type='' property="id" label="编号" show-overflow-tooltip width="70">
        </el-table-column>
        <el-table-column align="left" property="name" label="人员信息" show-overflow-tooltip width="200px">
          <template slot-scope="{row}">
            <div>姓名：{{row.name}}</div>
            <div>单位：{{row.org_name}}</div>
            <div>时间：{{row.create_time}}</div>
            <div>金额：{{row.order_amount}}</div>
          </template>
        </el-table-column>
        <el-table-column align="left" property="title" label="领用明细" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div v-for="_row in row.order_goods" class="flex">
              <div style="width: 60px;">
                <el-image :src="_row.goods_img" style="width: 50px;height: 50px;"></el-image>
              </div>
              <div style="flex:1">
                <div style="font-size: 14px; color:#000; font-weight: bold;">{{_row.goods_name}} * ({{_row.sku_name}})</div>
                <div>
                  <span>数量：</span><span style="color: red;">{{_row.buy_number}}</span>
                  <span>单价：</span><span style="color: red;">{{_row.goods_price}}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index"></Page>
    </el-card>

    <Add :show.sync="dialog.addDialogStatus" size="small" @refesh_list="index"></Add>
    <Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refesh_list="index"></Update>

  </div>

</div>

<script src="/assets/js/app.js"></script>
<script src="/assets/libs/treeselect/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="/assets/libs/treeselect/vue-treeselect.min.css">
<script src="/assets/admin/node/add.js?v=3034"></script>
<script src="/assets/admin/node/update.js?v=5774"></script>
<script>
  new Vue({
    el: '#app',
    components: {
      'treeselect': VueTreeselect.Treeselect,
    },
    data: function() {
      return {
        dialog: {
          addDialogStatus: false,
          updateDialogStatus: false,
        },
        searchData: {},
        button_group: [{
            name: '添加',
            color: 'success',
            access: '/admin/Node/add.html',
            icon: 'el-icon-plus',
            disabled: '',
            clickname: 'add'
          },
          {
            name: '修改',
            color: 'primary',
            access: '/admin/Node/update.html',
            icon: 'el-icon-edit',
            disabled: 'single',
            clickname: 'update'
          },
          {
            name: '删除',
            color: 'danger',
            access: '/admin/Node/delete.html',
            icon: 'el-icon-delete',
            disabled: 'multiple',
            clickname: 'del'
          },
        ],
        loading: false,
        page_data: {
          limit: 10,
          page: 1,
          total: 0,
        },
        ids: [],
        single: true,
        multiple: true,
        search_visible: true,
        expand: true,
        list: [],
        updateInfo: {},
        config: {org_arr:[]}
      }
    },
    methods: {
      doSearch() {
        this.page_data.page = 1
        this.index()
      },
      index() {
        let param = {
          limit: this.page_data.limit,
          page: this.page_data.page
        }
        Object.assign(param, this.searchData)
        this.loading = true
        axios.post('/admin/order/index.html', param).then(res => {
          if (res.data.status == 200) {
            this.list = res.data.data.data
            this.page_data.total = res.data.data.total
            this.loading = false
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      updateExt(row, field) {
        if (row.id) {
          axios.post('/admin/node/updateExt', {
            id: row.id,
            [field]: row[field]
          }).then(res => {
            if (res.data.status == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      },
      doAdd() {
        this.dialog.addDialogStatus = true
      },
      update(row) {
        let id = row.id ? row.id : this.ids.join(',')
        axios.post('/admin/node/getUpdateInfo', {
          id: id
        }).then(res => {
          if (res.data.status == 200) {
            this.dialog.updateDialogStatus = true
            this.updateInfo = res.data.data
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      del(row) {
        this.$confirm('确定操作吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = row.id ? row.id : this.ids.join(',')
          axios.post('/admin/node/delete', {
            id: ids
          }).then(res => {
            if (res.data.status == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success'
              })
              this.index()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }).catch(() => {})
      },
      doExport() {
        str = ""
        for (item in this.searchData) {
          str += item + '=' + this.searchData[item] + '&'
        }

        open('/admin/order/exportExcel?' + str)
      },
      doExport1() {
        str = ""
        for (item in this.searchData) {
          str += item + '=' + this.searchData[item] + '&'
        }

        open('/admin/order/exportExcel1?' + str)
      },
      selection(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      handleRowClick(row, rowIndex, event) {
        if (event.target.className !== 'el-input__inner') {
          this.$refs.multipleTable.toggleRowSelection(row)
        }
      },
      rowClass({
        row,
        rowIndex
      }) {
        for (let i = 0; i < this.ids.length; i++) {
          if (row.id === this.ids[i]) {
            return 'rowLight'
          }
        }
      },
      toggleRowExpansion() {
        this.expand = !this.expand
        this.list.forEach(item => {
          this.$refs.multipleTable.toggleRowExpansion(item, this.expand)
        })
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.val,
          label: node.key,
          children: node.children
        }
      },
      fn(method) {
        this[method](this.ids)
      },
    },
    mounted() {
      axios.post('/admin/org/index.html', param).then(res => {
          if (res.data.status == 200) {
            this.config.org_arr = res.data.data.data
          } else {
            this.$message.error(res.data.msg);
          }
        })
      this.index()
    },
  })
</script>
${template "main_footer.html"}